<template>
    <div class="model-pie">
        <ve-pie width="100%" height="300px" :legend-visible="false" :extend="modelData.modelNum?chartExtend:chartExtendHide" :colors="modelData.modelNum?chartColors:chartColorsHide"  :data="chartData"></ve-pie>
        <span class="data-pie-content-number">模型总量：{{modelData.modelNum}}</span>
    </div>
</template>

<script>
export default {
    name: 'ModelPie',
    props: {
        modelData: {
            required: true,
            type: Object
        }
    },
    data () {
        return {
            chartExtendHide: {
                legend: {
                    data: ['二分类', '回归', '聚类', '多分类'],
                    bottom: 0,
                    itemWidth: 13,
                    selectedMode: false,
                    icon: 'circle'
                },
                series: {
                    silent: true,
                    center: ['50%', '50%'],
                    radius: [0, '60%'],
                    label: false,
                    labelLine: {
                        show: false
                    }
                }
            },
            chartExtend: {
                legend: {
                    data: ['二分类', '多分类', '聚类', '回归'],
                    // itemHeight: 10,
                    // itemGap: 30,
                    icon: 'circle',
                    itemWidth: 13,
                    bottom: 0
                },
                series: {
                    center: ['50%', '50%'],
                    radius: [0, '60%'],
                    labelLine: {
                        normal: {
                            smooth: 0.2,
                            length: 10,
                            length2: 15
                        }
                    }
                }
            },
            chartColorsHide: ['#EDF4FA'],
            chartColors: ['#F2637B', '#FFC76A', '#3ED9A5', '#2E2FEE'],
            chartData: {
                columns: ['名称', '数值'],
                rows: [
                    { '名称': '二分类', '数值': 0 },
                    { '名称': '多分类', '数值': 0 },
                    { '名称': '聚类', '数值': 0 },
                    { '名称': '回归', '数值': 0 }
                ]
            }
        }
    },
    watch: {
        modelData: {
            handler (val) {
                this.chartExtend.legend.data = val.modeName
                this.chartData.rows = val.vchartData
            },
            deep: true,
            immediatetrue: true
        }
    }
}
</script>

<style lang="less">
.model-pie {
    position: relative;
    width: 100%;
    height: 100%;
    .data-pie-content-number {
        position: absolute;
        right: 0;
        top: 0;
        font-size: 14px;
    }
}
</style>
